1

Vue+Flask超简单实现一个图片分享网站及多平台部署


PicShare 网站简介


源码地址

这是一个图片分享平台,借鉴Instagram的基础功能和页面布局并进行一点减法的移动端网页,也是我在移动端乃至Web项目的处女作,文章或者项目有问题的地方欢迎大家多多指正(o^^o)

先来点图


<div width = "100%" align = "center">

<img src="https://i.loli.net/2019/06/17/5d0708ab3b3aa93675.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d0708ab00b4f91100.png" width="30%"/>
<br>
<strong>登录注册</strong><br>
<img src="https://i.loli.net/2019/06/17/5d0708ae5f3e486067.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d0708a9383af51880.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d0708acad3bb64840.png" width="30%"/><br>
<strong>首页&内容发布</strong>
<br>
<img src="https://i.loli.net/2019/06/17/5d07199e5535448220.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d0708ad5e98976560.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d07188ce8b7599660.png" width="30%"/>
<br>
<strong>评论转发</strong><br>
<img src="https://i.loli.net/2019/06/17/5d0708fc6c91a77739.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d071a397282f60732.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d071b1e30a1087146.png" width="30%"/>
<br>
<strong>消息</strong><br>
<br>
<img src="https://i.loli.net/2019/06/17/5d0709047e96518726.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d07090486b4662395.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d0708a7f05ae88729.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d0708fe4e9b946044.png" width="30%"/>
<img src="https://i.loli.net/2019/06/17/5d0708a880d1b49035.png" width="30%"/>
<br>
<strong>个人中心</strong><br>

项目技术栈


  • 前端:Vue.js + Vue Router + Vuex + ElementUI
  • 后端: Python Flask
  • 数据: MariaDB,对象云存储,图床

功能模块


登录&注册

网站的内容需要登录使用,其中注册的第一项为设置头像,不少小伙伴及面试官没有看见而导致提交时候失败,这个地方是我的疏忽,后期有时间了进行优化其显示与验证功能

首页&关注

用户登录成功后进入首页,首页可以获取到所有用户最近发表的图文动态,关注页面可以获取到所有关注用户的最近动态,用户可以通过点击点赞按钮对动态进行点赞操作,点击转发按钮进入内容转发页面,点击评论按钮进入评论页面

发表&转发

提供给用户一个可以自由发表与转发的面板

消息

用户可以收到与自己发表或者转发内容相关的消息,包括点赞,转发,评论,同时用户还可以收到与账户关系相关的消息,如关注,私信(有待实现)

个人中心

页面的布局及内容完全模仿Instagram的移动端网页,用户可以通过个人中心展示自己或者他人的信息,他人信息的入口为显示用户头像及用户名的地方(首页&关注的内容去,评论内容区,消息详情区域)

粉丝&关注

通过一个列表展示用户之间的关系,同时提供给用户关注与取消关注的按钮

项目部署


前端

默认当前目录为前端目录(frontend/)

  1. 安装所有的npm依赖

    npm install
  2. build

    npm run build

    此时前端目录上一级得到的dist文件夹就是我们服务器部署需要的文件夹

后端

默认当前的目录为后端目录(backend/)

  1. 确保你的服务器已安装Python 3 (推荐Python 3.6及以上)及虚拟环境 venv
  2. 创建虚拟环境

    python3 -m venv ./venv
  3. 激活虚拟环境

    source ./venv/bin/activate
  4. 安装后端需要的依赖

    pip install -r requirements.txt
  5. 编辑自己的private_config.py

    1. SECRET_KEY 可以是字符串,通过这个字符串进行密码加密存储时的加盐
    2. HOST 数据库的地址,默认为本地
    3. USERNAME 数据库的连接用户名,我使用的是root
    4. PASSWORD 数据库的连接密码
    5. PORT 数据库的监听端口,默认为3306
    6. DATABASE 数据库的名称,需要先建立数据库,不用建立表结构
    7. 如果需要使用对象云存储服务,则需要对Bucket进行相应的配置

服务器

  1. 使用Nginx进行反向代理,配置文件参考backend目录下的default文件
  2. 使用Heroku进行持续部署,配置文件参考backend目录下的Procfile文件

部署结果

总结


这是我的第一个web应用,通过77次代码的提交,不断爬坑不断学习,从中学习到了如何使用H5,CSS3,JS,Python以及服务器部署 Github源码


藻荇交横
6 声望0 粉丝